let sWiper = document.querySelector('.swiper-wrapper')
    // console.log(sWiper);

pAjax({
        url: './server/index.php',
        type: 'get',
        data: {
            pagenum: 0,
            pagesize: 2
        }

    }).then((res) => {
        // console.log(JSON.parse(res))
        let arr = JSON.parse(res)

        arr.forEach(ele => {
            // console.log(ele)
            let str =
                `<div class="swiper-slide"> <img  src="./images/timg.gif" data-src="${ele.img}" alt=""></div>`

            sWiper.innerHTML += str
        })
    })
    .then(function() {
        var swiper = new Swiper(".swiper-container", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
    })







// 列表
let oList = document.querySelectorAll('.ly-list-box ul')
let arr1 = []
console.log(oList);
oList.forEach(function(e) {

    // console.log(e)

    $.ajax({
        url: './server/index1.php',
        type: 'get',
        data: {
            pagenum1: 4,
            pagesize1: 4
        }
    }).then((res1) => {

        arr1 = JSON.parse(res1)

        let arrstr1 = []
        arr1.forEach(e => {
            // console.log(e.cake_detail_specs);
            if (e.cake_detail_specs) {
                arrstr1.push(
                    JSON.parse(e.cake_detail_specs)
                )
            }


        })

        arr1.forEach((ele, i) => {
            // console.log(ele)
            let img = document.querySelectorAll('.ly-list-box img')
            console.log(img)
            let str =
                ` <li>
                <a href="" target="_blank" name="" ${ele.cake_id}>
                    <img src="./images/timg.gif" data-src="${ele.cake_img} "  alt="" style="display: block;">
                </a>
                <a href="" target="_blank" name="">
                    <h6>${ele.cake_name}</h6>
                </a><br>
                <a href="" target="_blank" name="">
                    <p>${ele.cake_Ename}</p>
                </a>
                <div class="ly-tag-list">
                    <a href="" target="_blank" name="">
                    ${ele.cake_bottom_tig1}
                    </a>
                    
                    <a href="" target="_blank" name="">
                    ${ele.cake_bottom_tig2}
                    </a>
                </div>
                <div class="ly-cart-info">
                    <span class="ly-spec">
                        ${ele.cake_price}
                    </span>
                    <span>
                        /
                    </span>
                    <span class="ly-spec1">
                        ${ele.cake_weight}
                    </span>
                    <a href="javascript:;" class="ly-add-cart1">加入购物车</a>
                </div>

            
                <div class="ly-boxx">
                <div class="ly-boxx-price">
                    <span class="ly-active">${arrstr1[i] && arrstr1[i][0]}</span>
                    <span>${arrstr1[i] && arrstr1[i][1]}</span>
                    <span>${arrstr1[i] && arrstr1[i][2]}</span>
                    <span>${arrstr1[i] && arrstr1[i][3]}</span>
                </div>

                <div class="ly-boxx-list1">
                    <input class="ly-on" type="button" value="${arrstr1[i] && (arrstr1[i][0].substring(0,6))}" goodsId=${ele.goods_id}>
                    <input type="button" value="${arrstr1[i] && (arrstr1[i][1].substring(0,6))}">
                    <input type="button" value="${arrstr1[i] && (arrstr1[i][2].substring(0,6))}">
                    <input type="button" value="${arrstr1[i] && (arrstr1[i][3].substring(0,6))}">
                </div>

                <div class="ly-buttons">
                    <div class="ly-buttons1">立即购买 </div>
                    <div class="ly-buttons2"  goodsId=${ele.cake_id}> 加入购物车</div>
                </div>
            </div>
        </li>`

            e.innerHTML += str
        });
        // 懒加载
        window.onload = loadImg;
        window.onscroll = scrollImg(loadImg);

        function loadImg() {
            let img = document.querySelectorAll("img");
            img.forEach((item, index) => {
                if (item.getBoundingClientRect().top < window.innerHeight) {
                    item.src = item.dataset.src;
                    console.log(item.dataset.src);
                }
            });
        }

        function scrollImg(attr) {
            let timer = null;
            let content = this;

            return function() {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    attr.call(content);
                }, 300);
            };
        }


        // 加入购物车
        let oJiaru1 = document.querySelectorAll('.ly-add-cart1')
        let oXianshi1 = document.querySelectorAll('.ly-boxx')
        let lyboxx = document.querySelector(".ly-boxx-price")
            // oJiaru.forEach((ele) => {
        for (let i = 0; i < oJiaru1.length; i++) {
            oJiaru1[i].addEventListener('click', function() {
                oJiaru1.forEach((ele, index) => {
                    oJiaru1[index].parentElement.nextElementSibling.style.display = "none";

                })
                this.parentElement.nextElementSibling.style.display = "block";
            })
        }
        // 选项卡
        let aBtn = document.querySelectorAll('.ly-boxx-list1 input')
        let aDiv = document.querySelectorAll('.ly-boxx-price span')
        aBtn.forEach(function(ele, index) {
            ele.onclick = function() {
                for (var i = 0; i < aBtn.length; i++) {
                    aBtn[i].className = ''
                    aDiv[i].className = ''
                }
                this.className = 'ly-on'
                aDiv[index].className = 'ly-active'
            }
        })
    })
})